<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>使用Slots分发内容</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
        .component {
            text-align: center;
            color: #42b983;
            font-size: 28px;
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
    <div id="example">
        <h2>I'm the child title</h2>
        <app>
            <app-header></app-header>
            <app-footer></app-footer>
        </app>
    </div>
    <script type="text/javascript">
        Vue.component('app', {
            template: '<h1>' + '{{message}}' + '</h1>' + '<slot>' + '没有内容显示我' + '</slot>',
            data: function() {
                return {
                    message: "app"
                }
            }

        });
        Vue.component('app-header', {
            template: '<div><p>{{message}}</p></div>',
            data: function() {
                return {
                    message: "app-header",
                    someChildProperty: true
                }
            }
        });
        Vue.component('app-footer', {
            template: '<div v-show="someChildProperty"><p>{{message}}</p></div>',
            data: function() {
                return {
                    message: "app-footer",
                    someChildProperty: true
                }
            }
        });
        new Vue({
            el: "#example"
        })
    </script>
</body>

</html>